Flex layout

Como organizar los componentes en nuestra aplicación usando flexbox.

Este es el código base usado para los ejemplos:

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={[styles.box, {backgroundColor:"blue"}]}></View>
      <View style={[styles.box, {backgroundColor:"red"}]}></View>
      <View style={[styles.box, {backgroundColor:"green"}]}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex:1
  },

  box: {
    height: 70,
    width: 70
  }

});

export default App;

En la View principal indicamos siempre flex: 1, para que ocupe toda la pantalla.

Para organizar los componentes podemos usar principalmente la siguientes propiedades de flexbox:

• flexDirection
• alignItems
• justifyContent

En React-Native podemos usar la etiqueta View para organizar los componentes en bloques (de igual manera que div en html)

flexDirection

Podemos usar la propiedad flexDirection para organizar los componentes en filas o columnas (Por defeccto se alinean en columnas):

Podemos cambiar el flexDirection a "row" y se vería así:

container: {
    padding: 10,
    flex:1,
    flexDirection: "row"
}

alignItems

Está propiedad está afectada directamente por el flexDirection, si flexDirection está en row entonces la propiedad alignItems alineará los elementos verticalmente, si flexDirection está en column entonces alignItems alineará los elementos horizontalmente.

Puede tomar los siguientes valores, entre otros:

• center
• flex-end
• flex-start

container: {
    padding: 10,
    flex:1,
    flexDirection: "row",
    alignItems: "center"
}

justifyContent

De igual manera que alignItems está propiedad está afectada por flexDirection, y funciona al reves que alignItems, si flexDirection es row alinea en horizontal, si flexDirection es column alinea verticalmente.

Algunos de los valores que podemos indicar:

• center
• space-around
• space-between
• flex-end
• flex-start

container: {
    padding: 10,
    flex:1,
    flexDirection: "row",
    justifyContent: "space-between"
}

Usar varios Views

Podemos usar la propiedad flex para indicar cuanto queremos que ocupe cada View, normalmente la view que agrupa todos los demas componentes tendrá un flex de 1 (al ser el único elemento ocupará toda la pantalla).

En el ejemplo anterior podemos eliminar la clase box del css, de manera que los elmentos se expandirán ocupando todo el espacio disponible.

En este caso podemos usar la propiedad flex para indicar cuando debe de ocupar cada elemento, la propiedad flex funciona de manera que los elementos ocuparán la parte proporcional en funcion del valor que tengan, si un elemento tiene flex 2 y otro flex 1 un elemento ocupará el doble que el otro:

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={{height:70, flex:1, backgroundColor:"blue"}}></View>
      <View style={{height:70, flex:3, backgroundColor:"red"}}></View>
      <View style={{height:70, flex:2, backgroundColor:"green"}}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex:1,
    flexDirection: "row"
  },
});

export default App;

En este ejemplo tenemos un elemento con flex 1, otro elemento con flex 3 y otro elemento con flex 2, y la distribución queda tal que así:

React Native | Componentes